<template>
  <div>
    <a-modal
      :visible="visible"
      :maskClosable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      :title="modalTitle"
      :okText="'提交'"
      width="760px"
      :destroyOnClose="true"
      @cancel="cancelSub"
    >
      <!-- centered -->

      <a-form-model class="flex-model-form"
        ref="addForm"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="组织名称" prop="partyOrgName">
              <a-input placeholder="请输入组织名称" v-model="formModal.form.partyOrgName" allow-clear />
            </a-form-model-item>
         </a-col>
          <a-col :span="12">
            <a-form-model-item label="上级组织" prop="parenName">
              <a-input placeholder="上级组织" v-model="formModal.form.parenName" disabled />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="组织类型" prop="orgType">
              <OrgTypeSelect v-model="formModal.form.orgType"
                placeholder="请选择组织类型"
                :params="{id: selectOptions.id}"
              >
              </OrgTypeSelect>
              <!-- <a-input placeholder="请选择组织类型" v-model="formModal.form.type" allow-clear /> -->
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="组织成立时间" prop="orgRegtime">
              <a-date-picker 
                placeholder="请选择组织成立时间"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="formModal.form.orgRegtime"
                allow-clear 
               />
              <!-- <a-input /> -->
            </a-form-model-item>
          </a-col>
        </a-row>
        <template v-if="modalType!=='add'">
          <a-row :gutter="24">
            <a-form-model-item label="组织书记" prop="shuji">
              <a-date-picker 
                placeholder="请选择组织成立时间"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                v-model="formModal.form.shuji"
                allow-clear 
               />
            </a-form-model-item>
            <a-col :span="12">
            </a-col>
          </a-row>
        </template>
      </a-form-model>
      
      <template slot="footer">
        <a-button :disabled="formModal.loading" key="back" @click="cancelSub">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="formModal.loading" @click="submitForm">
          提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

import { annualPlanAdd } from '@/api/office/anualConference/index'
import OrgTypeSelect from '../../componments/orgTypeSelect.vue'
import { insertSelective } from '@/api/partyMasses'
export default {
  name:'a'+ Date.now(),
    // name: 'EditInfo',
    components: {
      OrgTypeSelect
    },
    props: {
      modalType: {
        type: String,
        default() {
          return 'add'
        }
      },
      visible: {
        type: Boolean,
        default() {
            return true
        }, 
      },
      selectOptions: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data() {
        return {
          formModal: {
            loading: false,
            form: {
              partyOrgName: '',//党组织名称
              parentId: '',//父级id
              orgType: '',//组织类型
              orgRegtime: '',//成立时间
              parenName: '',
            },
            rules: {
              partyOrgName: [ { required: true, message: '请输入组织名称', trigger: 'blur' } ],
              // parentId: [ { required: true, message: '请选择编制单位', trigger: 'change' } ],
              orgType: [ { required: true, message: '请选择组织类型', trigger: 'blur' } ],
              orgRegtime: [ { required: true, message: '请选择组织成立时间', trigger: 'change' } ],
            },
          },
        }
    },
    computed: {
      modalTitle() {
        const map = {
          add: '新增党组织信息',
          edit: '组织信息设置',
          change: '换届'
        }
        return map[this.modalType]
      },
      pageType() {
        return this.$route.query.pageType
      },
      open() {
        return this.$route.query.open
      }
    },
    watch: {
      visible(val) {
        if (val && this.selectOptions?.partyOrgName) {
          this.formModal.form.parentId = this.selectOptions?.id;
          this.formModal.form.parenName = this.selectOptions?.partyOrgName;
        }
      }
    },
    mounted() {
    },
    methods: {
      cancelSub() {
        let _this = this;
        _this.$emit('update:visible', false)
      },
      submitForm() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.formModal.loading = true;
            const params = {
              ...this.formModal.form
            }
            delete params.parenName;
            insertSelective(params).then((res) => {
              this.$refs.addForm.resetFields()
              this.formModal.loading = false
              if ((res && res.data && res.data.code == 0) || (res && res.code == 0)) {
                this.$message.success('发起成功')
                this.formModal.form.parenName = '';
                this.$emit('submitSuccess');
                this.cancelSub();
              } else {
                this.$message.error('发起失败！')
              }
            }).catch(() => {
              this.formModal.loading = false
            })
          } else {
            return false;
          }
        });
      }
    },
}
</script>
<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
  .tool-btns .ant-btn{
    margin-left: 12px;
   }
</style>